<template>
	<!--我关注的租房-->
	<!--https://youzan.github.io/vant/#/zh-CN/intro-->
	<div class="favorhouse" id="app">
		<!--没有数据-->
		<div class="noinfo" v-if="!showlogge">
			<img src="../../../../static/wfy/crying_face.jpg" />
			<h3 class="showtop">您还没有关注的房源</h3>
			<p>去关注房源吧</p>
		</div>
		<!--有数据-->
		<ul class="houseinfo" v-else-if="showlogge">
			<li v-for="item in data">
				<router-link :to="{path:'/lideta/mydetails',query:{id:item.house_id}}">
					<div><img  v-bind:src="'http://106.13.72.24:81/house/public/static/uploads/'+item.img1"></div>
					<div class="housebox">
						<h4 class="title">{{item.house_des}}米国际社区  {{item.house_type}}</h4>
						<p class="details">有米国际社区  <span>{{item.house_type}}</span><span>{{item.house_size}}m²</span><span>{{item.house_direction}}</span></p>
						<div class="introduce">
							<span>月租</span>
							<span>有阳台</span>
							<span>免中介费</span>
							<span>押一付一</span>
						</div>
						<div class="pricebox"><p class="price"><span class="pic">{{item.house_price}}</span><span class="month">元/月</span></p><button class="del"></button></div>
					</div>
				</router-link>
			</li>
		</ul>

	</div>
</template>
<script>
	import myheader from '@/components/public/myheader'
	export default {
		name: 'favorhouse',
		data() {
			return {
				showlogge: true,
				data:''
			}
		},
		mounted:function() {
			//判读是否登陆了
			if(localStorage.getItem("nameid")==null||localStorage.getItem("nameid")==undefined||localStorage.getItem("nameid")==""){
				this.$router.push({
					name:'login'
				});
			}
			else{
				
				var _this=this;
				_this.axios.get(_this.ajaxUrl + '/api/mylist/housefind').then(function(res){
					_this.data=res.data.data;
				
					if(_this.data.length>0){
						_this.showlogge=true;
					}
					else{
						_this.showlogge=false;
					}
				}).catch(function(err) {});
			}
		},
		components: {
			myheader
		},
		methods: {
			
		}
	}
</script>

<style scoped="scoped">
	.noinfo {
		margin-top: 3.1rem;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.showtop {
		width: 100%;
		text-align: center;
		margin-top: 0.85rem;
	}
	
	.noinfo img {
		width: 1.63rem;
		height: 1.63rem;
	}
	
	.noinfo p {
		margin-top: 0.35rem;
		font-size: 0.3rem;
		color: #8f929c;
	}
	
	.houseinfo  {
		list-style: none;
	}
	
	.houseinfo  li {
		padding: 0.35rem 0;
		/*height: 2.35rem;*/
		box-sizing: border-box;
	}
	.houseinfo  li>a {
		width: 100%;
		height: 100%;
		display: block;
		padding-left: 0.3rem ;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}
	.houseinfo  li>a img{
		width: 2.09rem;
		height: 1.58rem;
	}
	.houseinfo .housebox{
		padding:0 0.3rem ;
		box-sizing: border-box;
	}
	.title{
		display: inline-block;
		font-size: 0.28rem;
		color: #000000;
		line-height: 0.4rem;
	}
	.details{
		display: inline-block;
		font-size: 0.2rem;
		color: #b2b5b8;
		line-height: 0.5rem;
		height: 0.5rem;
	}
	.introduce{
		font-size: 0.2rem;
	}
	
	.introduce span{
       color: #4c7eae;
       padding: 0.03rem;
       border-radius: 0.03rem;
       background: #e7ecf1;
	}
	.pricebox{
		display: flex;
		justify-content: space-between;
		padding-right:0.3rem ;
	}
	.price{
		color: #fe6660;
		height: 0.5rem;
		line-height: 0.5rem;
		font-size: 0.2rem;
	}
	.pic{
		font-size: 0.35rem;
		font-weight:800;
	}
	.month{
		padding: 0.1rem;
	}
	.del{
		width: 0.25rem;
		height: 0.33rem;
		background: url(../../../../static/wfy/del_07.gif) no-repeat top center;
		outline: none;
		background-size:cover ;
		margin-top: 0.1rem;
		border: none;
	}
</style>